<template>
  <div class="login-container">
    <div class="form-wrapper">
      <div>
        <el-form ref="formRef" :rules="data.rules" :model="data.form" style="width: 300px;  margin: 0 auto">
          <div style="margin-bottom: 40px; font-size: 30px; text-align: center; color: #2a7109; font-weight: bold">欢迎登录健康管理页面</div>
          <el-form-item prop="username">
            <el-input style="height: 40px" v-model="data.form.username" autocomplete="off" placeholder="请输入用户名" >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password style="height: 40px"  v-model="data.form.password" autocomplete="off" placeholder="请输入密码">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="role">
            <el-select style="width: 100%" size="large" v-model="data.form.role" placeholder="请选择用户角色">
              <el-option value="admin" label="管理员"></el-option>
              <el-option value="user" label="普通用户"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-bottom: 20px">
        <el-button @click="login" size="large" type="primary" style="width: 90%; margin: 0 auto; display: block; margin-top: 30px">登 录</el-button>
      </div>
      <div style="text-align: right">
        还没有账号？请<a style="color: #0742b1; text-decoration: none" href="/register">注册</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {User,Lock} from "@element-plus/icons-vue"
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import request from "@/utils/request.js";


const data = reactive({
  form: {role: 'user'},
  rules: {
    username: [
      {required: true, message: '请输入用户名', trigger: 'blur'},
      {min: 2,  message: '长度需大于两个字符', trigger: 'blur'}
    ],
    password: [
      {required: true, message: '请输入密码', trigger: 'blur'},
    ]
  }
})

const formRef = ref()

const login = () => {
  formRef.value.validate(valid => {
    if (valid) {
      request.post('/login', data.form).then(res => {
        if (res.code == '200') {
          //存储后台返回的用户数据
          localStorage.setItem('xm-pro-user', JSON.stringify(res.data)) //把JSON对象转为JSON字符串存储
          ElMessage.success('登录成功')
          location.href = "/manager/home"
        }else {
          ElMessage.error(res.msg)
        }
      })
    }else {
      ElMessage.warning('请填写正确信息')
    }
  })
}

</script>

<style scoped>.login-container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/login.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-wrapper {
  width: 400px;
  padding: 80px;
  background-color: #dcf6de;
  border-radius: 20px;
}
</style>